<template>
    <section class="classify-main base-main">
      <!--搜索栏-->
      <div class="search-box line-bottom line-top">
        <span class="inline-block text-c" @click="handleToSearch">
          <i class="iconfont iconsousuo1"></i>
          搜索商品
        </span>
      </div>
      <!--搜索栏-->

      <!--分类列表-->
      <div class="classify-list-box">
        <!--左侧菜单-->
        <div class="nav-list">
          <p
            @click="handleJ(index,'#classify' + index)"
            class="fs14 text-c color333 pr"
            :class="jupmNum == index ? 'active' : ''"
            v-for="(item,index) in navList"
            :key="index">
            <span>{{item.text}}</span>
          </p>
        </div>
        <!--左侧菜单-->

        <!--右侧内容-->
        <div class="classify-list">
          <div
            class="classify-one"
            v-for="(item,index) in classifyList"
            :key="index">
            <div
              class="head text-c color333"
              :id="'classify' +index">
              <span class="left inline-block pr"></span>
              {{item.title}}
              <span class="right inline-block pr"></span>
            </div>
            <div class="product-list">
              <div
                @click="handleToProductDetail(item.id)"
                v-for="(product,subIndex) in item.productDate"
                class="product-box"
                :class="subIndex == 0 ? '' : 'mt12'">
                <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="">
                <div class="msg pr inline-block">
                  <p class="clamp1">商品名称</p>
                  <p class="fs12">商品名称</p>
                  <p class="pa colorF54E4E">￥80.00</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--右侧内容-->

      </div>
      <!--分类列表-->
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        navList:[
          {
            id:1,
            text:'中医按摩'
          },
          {
            id:2,
            text:'美容护肤'
          },
          {
            id:3,
            text:'日用健康'
          },
          {
            id:4,
            text:'运动健康'
          },
        ],//分类导航列表
        classifyList:[
          {
            title:'中医按摩',
            productDate:[
              {
                id:1,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:2,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:3,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:4,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:5,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:6,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
            ],
          },
          {
            title:'美容护肤',
            productDate:[
              {
                id:1,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:2,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:3,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:4,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:5,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:6,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
            ],
          },
          {
            title:'日用健康',
            productDate:[
              {
                id:1,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:2,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:3,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:4,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:5,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:6,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
            ],
          },
          {
            title:'运动健康',
            productDate:[
              {
                id:1,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:2,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:3,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:4,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:5,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:1,
                typeText:'产品上新',
                price:'268.00',
                sellNum:'2654'
              },
              {
                id:6,
                src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
                name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
                model:'SF-608 腰椎治疗仪',
                type:2,
                typeText:'满500减100',
                price:'268.00',
                sellNum:'2654'
              },
            ],
          },
        ],//分类商品列表
        jupmNum:0,
      }
    },
    created(){
      this.$nextTick(function(){
        this.handleJ(0,'#classify0')
      })
    },
    mounted() {
      window.addEventListener('scroll',this.handleScroll,false)
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll, false)
    },
    methods: {
      //点击搜索
      handleToSearch(){
        this.$router.push({
          name:'search'
        })
      },
      //锚点跳转
      handleJ(index,id){
        let scrollH = 0;
        this.jupmNum = index;
        scrollH = $(id).offset().top == 0 ? 0 : ($(id).offset().top - 40)
        $('html ,body').animate({scrollTop: scrollH}, 300);
      },
      handleScroll(event){
        event.preventDefault();
        let scrollTop = window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;

        for (let i = 0,len = this.classifyList.length; i < len; i++) {
          if($('#classify' + i).offset().top <= scrollTop+44){
            this.jupmNum = i
          }
        }
      },
      //点击商品
      handleToProductDetail(id){
        this.$router.push({
          path:'/index/web/productDetail',
          query:{id:id}
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/classify';
</style>
